<template>
  <div class="about">
    <el-main style="margin-top:70px">
      <!--广告-->
      <div style=" background-size: 1200px;
            background-repeat: no-repeat;border: 1px solid #f5f5f5;height: 48px;width: 1200px;margin: 0 auto">

        <a href="" style="width: 1200px;height: 48px;display: inline-block;text-decoration: none;text-align: right">
          <img src="../../../assets/images/advertisement.png" height="48" width="1200"/>
        </a>
      </div>
      <!--第一部分-->
      <div style="width: 1200px;height: 500px;margin: 5px auto">
        <el-row gutter="5">
          <el-col span="4">
            <el-card style="height: 500px;border-radius: 0">
              <div>
                <p style="padding: 0;margin: 0;font-weight: bold;font-size: 20px">品牌
                  <a href="" style="float: right;font-weight: normal;font-size:10px;margin-top: 5px;
                                                    text-decoration: none;color:#333;">全部<i class="el-icon-arrow-right"></i></a>
                </p>
                <div style="margin-top: 10px;" class="brand">
                  <a href="">大众</a>
                  <a href="">奥迪</a>
                  <a href="">宝马</a>
                  <a href="">奔驰</a>
                  <a href="">丰田</a>
                  <a href="">本田</a>
                  <a href="">别克</a>
                  <a href="">现代</a>
                  <a href="">福特</a>
                  <a href="">日产</a>
                  <a href="">起亚</a>
                  <a href="">三菱</a>
                  <a href="">比亚迪</a>
                </div>
              </div>
              <el-divider style="margin: 0"></el-divider><!--这是分割线-->
              <div class="brand">
                <p >价钱</p>
                <a href="">3万以内</a>
                <a href="">3-5万</a>
                <a href="">5-8万</a>
              </div>
              <el-divider style="margin: 0"></el-divider><!--这是分割线-->
              <div class="brand">
                <p style="">月供</p>
                <a href="">1000元以下</a>
                <br>
                <a href="">1000-3000元</a>
                <br>
                <a href="">3000-5000元</a>
                <br>
                <a href="">5000-8000元</a>
              </div>
            </el-card>
          </el-col>
          <el-col span="16">
            <el-carousel height="500px">
              <el-carousel-item  v-for="url in bannerArr" >
                <img :src=url width="100%" height="100%" >
              </el-carousel-item>
            </el-carousel>
          </el-col>
          <el-col span="4">
            <div >
              <el-card style="height:300px;margin: 0 0;border-radius: 0">
                <p id="help-choose" style="margin: 0;text-align: center;padding-top: 20px">帮你选车</p>
                <p class="help-choose-two" style="margin: 0;text-align: center;">低首付</p>
                <p class="help-choose-two" style="margin: 0;text-align: center;">“秒”批付</p>
                <el-input placeholder="请输入手机号" clearable style="margin-top: 30px;"></el-input>
                <el-input placeholder="输入验证码" clearable style="margin: 5px 0;width: 88px;"></el-input>
                <a href="" style="font-size: 8px;">获取验证码</a>
              </el-card>
              <a href="" style="margin-top: 5px" id="test-advertisement-a">
                <div id="test-advertisement" style="height:200px;margin: 0 0;background-color: #e8e8e8;">
                  <p id="test-advertisement-p">去测额度</p>
                  <p id="test-advertisement-p2">测测你的<br>贷款额度</p>
                </div>
              </a>
            </div >
          </el-col>
        </el-row>
      </div>
      <!--第二部分-->
      <div style="width: 1200px;height: 130px;margin: 5px auto">
        <el-row >
          <el-col span="8">
            <el-card style="width: 400px;height: 130px;background-color:#fafafa;border-radius: 0">
              <a href="" class="second_main">
                <div style="width: 150px;float: left">
                  <p class="second_main_p1">买二手车 <i style="color:#f29600;font-weight: bold" class="el-icon-right"></i></p>
                  <p class="second_main_p2">388888辆在售车源</p>
                </div>
                <img src="../../../assets/images/ads1.png" style="float: right;width:200px">
              </a>
            </el-card>
          </el-col>
          <el-col span="8">
            <el-card style="width: 400px;height: 130px;background-color:#fafafa;border-radius: 0">
              <a href="" class="second_main">
                <div style="width: 150px;float: left">
                  <p class="second_main_p1">分期购车 <i style="color:#f29600;font-weight: bold" class="el-icon-right"></i></p>
                  <p class="second_main_p2">低至3成首付 低门槛</p>
                </div>
                <img src="../../../assets/images/ads2.png" style="float: right;width:200px">
              </a>
            </el-card>
          </el-col>
          <el-col span="8">
            <el-card style="width: 400px;height: 130px;background-color:#fafafa;border-radius: 0">
              <a href="" class="second_main">
                <div style="width: 150px;float: left">
                  <p class="second_main_p1">我要卖车 <i style="color:#f29600;font-weight: bold" class="el-icon-right"></i></p>
                  <p class="second_main_p2">最快1天出售 0收费</p>
                </div>
                <img src="../../../assets/images/ads3.png" style="float: right;width:200px">
              </a>
            </el-card>
          </el-col>
        </el-row>
      </div>
      <!--第三部分-->
      <div style="width: 1200px;height: 86px;margin: 5px auto">
        <a href="" class="three_a">
          <span style="font-size: 30px;color: #333;padding-right: 10px;position: relative;">分期购 ·</span>
          <span style="font-size: 30px;color: #999;">贷款购车，给您更多选择</span>
          <p class="three-p">查看全部<i style="font-weight: bold" class="el-icon-right"></i></p>
        </a>
      </div>
      <!--第四部分-->
      <div style="width: 1200px;height: 370px;margin: 5px auto">
        <el-row gutter="5">
          <el-col span="8" style="height:370px;background-image: url(../../../assets/images/fourBg1.png);background-size: 500px">
            <a href="">
              <div>
                <img class="fourcar" src="../../../assets/images/fourcar1.png" style="width:400px">
              </div>
              <div>
                <div style="font-size: 14px;line-height: 14px;color: #666;text-align: center">代步、练手好选择</div>
                <p style="margin: 0;padding: 0;border: 0 none;font-size: 30px;color: #666;
                                            text-align: center;font-weight: bold">2万以内，<i style="color: #bb9077;font-style:normal;">超低</i>首付</p>
                <div class="four-button">即刻选购</div>
              </div>
            </a>
          </el-col>
          <el-col span="8"  style="height: 370px;">
            <el-row  style="height: 182px;background-color:#e6e6fa">
              <a href="">
                <div>
                  <img class="fourcar" src="../../../assets/images/fourcar2.png" style="float: right;width: 300px;position: absolute;top:25px;left: 110px">
                </div>
                <div style="color: #666;float: left;margin-left: 15px;margin-top: 30px">
                  <div style="font-size: 20px;">新车品质  原车质保</div>
                  <div>准新车</div>
                  <div class="four-button" style="background-color:#b0c4de">即刻选车</div>
                </div>
              </a>
            </el-row>
            <el-row style="height: 182px;margin-top:5px;background-color:#ffffe0">
              <a href="">
                <div>
                  <img class="fourcar" src="../../../assets/images/fourcar3.png" style="float: right;width: 300px;position: absolute;top:25px;left: 110px">
                </div>
                <div style="color: #666;float: left;margin-left: 15px;margin-top: 30px">
                  <div style="font-size: 20px;">二胎时代 七座大空间</div>
                  <div>MPV</div>
                  <div class="four-button" style="background-color:#bdb76b">即刻选车</div>
                </div>
              </a>
            </el-row>
          </el-col>
          <el-col span="8" style="height: 370px">
            <el-row  style="height: 182px;background-color: #fff8dc">
              <a href="">
                <div>
                  <img class="fourcar" src="../../../assets/images/fourcar4.png" style="float: right;width: 300px;position: absolute;top:25px;left: 110px">
                </div>
                <div style="color: #666;float: left;margin-left: 15px;margin-top: 30px">
                  <div style="font-size: 20px;">月供无压力 上班族钟爱</div>
                  <div>月供千元</div>
                  <div class="four-button" style="background-color:#d2b48c">即刻选车</div>
                </div>
              </a>
            </el-row>
            <el-row  style="height: 182px;margin-top:5px;background-color: #ffe4e1">
              <a href="">
                <div>
                  <img class="fourcar" src="../../../assets/images/fourcar5.png" style="float: right;width: 300px;position: absolute;top:25px;left: 110px">
                </div>
                <div style="color: #666;float: left;margin-left: 15px;margin-top: 30px">
                  <div style="font-size: 20px;">万元开豪车</div>
                  <div>低首付，慢慢还</div>
                  <div class="four-button" style="background-color:#ffb6c1">即刻选车</div>
                </div>
              </a>
            </el-row>
          </el-col>
        </el-row>
      </div>
      <!--第五部分-->
      <div style="width: 1200px;height: 144px;margin: 5px auto;color:#ef7c00;text-align: center;">
        <el-row>
          <el-col span="6">
            <div style="font-size: 50px;margin: 0;padding: 0"><i style="font-weight: bold;" class="el-icon-sold-out"></i></div>
            <div style="font-size: 30px;margin: 0;padding: 0;color:#a0522d">首付低</div>
            <p style="font-size: 15px;margin: 5px 0 0 0;padding: 0;color:#a0522d">低至三成首付</p>
          </el-col>
          <el-col span="6">
            <div style="font-size: 50px;margin: 0;padding: 0"><i style="font-weight: bold;" class="el-icon-copy-document"></i></div>
            <div style="font-size: 30px;margin: 0;padding: 0;color:#a0522d">更专业</div>
            <p style="font-size: 15px;margin: 5px 0 0 0;padding: 0;color:#a0522d">多种金融方案私人定制</p>
          </el-col>
          <el-col span="6">
            <div style="font-size: 50px;margin: 0;padding: 0"><i style="font-weight: bold;" class="el-icon-medal-1"></i></div>
            <div style="font-size: 30px;margin: 0;padding: 0;color:#a0522d">流程简洁</div>
            <p style="font-size: 15px;margin: 5px 0 0 0;padding: 0;color:#a0522d">证件少，批复快</p>
          </el-col>
          <el-col span="6">
            <div style="font-size: 50px;margin: 0;padding: 0"><i style="font-weight: bold;" class="el-icon-trophy"></i></div>
            <div style="font-size: 30px;margin: 0;padding: 0;color:#a0522d">优质服务</div>
            <p style="font-size: 15px;margin: 5px 0 0 0;padding: 0;color:#a0522d">专业金融人员全程跟进</p>
          </el-col>
        </el-row>
        <el-divider style="margin: 0"></el-divider><!--这是分割线-->
      </div>
      <!--第六部分-->
      <div style="width: 1200px;height: 86px;margin: 5px auto">
        <a href="" class="three_a">
          <span style="font-size: 30px;color: #333;padding-right: 10px;position: relative;">购辆新车 ·</span>
          <span style="font-size: 30px;color: #999;">花小钱，开好车</span>
          <p class="three-p">查看全部<i style="font-weight: bold" class="el-icon-right"></i></p>
        </a>
      </div>
      <!--第七部分-->
      <div style="width: 1200px;height: 313px;margin: 5px auto">
        <el-row gutter="10">
          <el-col span="6">
            <a href="" class="seven-card">
              <el-card shadow="hover">
                <div >
                  雪佛兰科沃兹 2016款 1.5L 欣享版
                </div>
                <div>
                  <img src="../../../assets/images/sevenCar1.jpg" style="width: 250px">
                </div>
                <p style="text-align: center">
                  <span>最低</span>
                  <i style="font-size: 24px;color: #ff443a;">0.80</i>
                  <span>万起</span>
                </p>
              </el-card>
            </a>
          </el-col>
          <el-col span="6">
            <a href="" class="seven-card">
              <el-card shadow="hover">
                <div >
                  起亚K3 2015款 1.6L AT GL 带天窗
                </div>
                <div>
                  <img src="../../../assets/images/sevenCar2.jpg" style="width: 250px">
                </div>
                <p style="text-align: center">
                  <span>最低</span>
                  <i style="font-size: 24px;color: #ff443a;">0.82</i>
                  <span>万起</span>
                </p>
              </el-card>
            </a>
          </el-col>
          <el-col span="6">
            <a href="" class="seven-card">
              <el-card shadow="hover">
                <div >
                  别克英朗 2017款 15N AT进取型
                </div>
                <div>
                  <img src="../../../assets/images/sevenCar3.jpg" style="width: 250px">
                </div>
                <p style="text-align: center">
                  <span>最低</span>
                  <i style="font-size: 24px;color: #ff443a;">0.85</i>
                  <span>万起</span>
                </p>
              </el-card>
            </a>
          </el-col>
          <el-col span="6">
            <a href="" class="seven-card">
              <el-card shadow="hover">
                <div >
                  丰田雷凌 2017款 1.2T CVT新锐版
                </div>
                <div>
                  <img src="../../../assets/images/sevenCar4.jpg" style="width: 250px">
                </div>
                <p style="text-align: center">
                  <span>最低</span>
                  <i style="font-size: 24px;color: #ff443a;">0.88</i>
                  <span>万起</span>
                </p>
              </el-card>
            </a>
          </el-col>
        </el-row>
      </div>
      <!--第八部分-->
      <div style="width: 1200px;height: 86px;margin: 5px auto">
        <a href="" class="three_a">
          <span style="font-size: 30px;color: #333;padding-right: 10px;position: relative;">身边好车 ·</span>
          <span style="font-size: 30px;color: #999;">同城优质车源</span>
        </a>
      </div>
      <!--第九部分-->
      <div id="nine" style="width: 1200px;height: 100px;margin: 5px auto;background-color: #e8e8e8;">
        <div  style="margin-top: 25px;height: 50px">
          <div style="line-height: 50px;">
            <span style="margin-left:250px;color: #333;font-size: 25px">认真服务您的每一个 <span style="color:#f08c15 ">用车需求</span></span>
            <a class="four-button" href="" style="float: right;margin-right: 300px;margin-top: 10px;width: 100px;background: #f08c15;">我要买二手车</a>
            <a class="four-button" href="" style="float: right;margin-right: 50px;margin-top: 10px;width: 100px;background: #f08c15;">我要卖车</a>
          </div>
        </div>
      </div>
    </el-main>
  </div>
</template>


<script>
export default {
  data() {
    return {
      bannerArr:[
          "../../../assets/images/car1.png",
          "../../../assets/images/car2.png",
          "../../../assets/images/car3.png",
      ],
      advertisementImg:"../../../assets/images/advertisement.png",
      activeIndex: '1',
      activeIndex2: '1'
    };
  },
  methods: {


    handleSelect(key, keyPath) {//key代表的是上面index的值
      console.log(key, keyPath);
    },
  },
  mounted(){//这个跟created一样也是打开页面就会
    //先有created再有mounted，习惯用这个多
    //处理菜单
  }
}
</script>

<style>
.ccc{
  border: 2px solid #0aa1ed
}
.el-main{
  overflow:visible;
}
a{
  text-decoration: none;
}
.c1{
  height: 85px/*;border: 2px solid #0aa1ed*/;border-radius: 5px;

}
.header-set{
  width: 1200px;height: 85px;margin: 0 auto;padding: 0;
}
#help-choose{
  height: 42px;
  line-height: 42px;
  text-align: center;
  font-size: 30px;
  font-weight: 600;
  color: #f29718;
}
.help-choose-two{
  text-align: center;
  font-size: 20px;
  font-weight: 600;
  color: #4a4a4a;
}
#test-advertisement{
  /*background-image: url("../../../assets/images/test.png");*/
  background-size: 110%;
}
#test-advertisement-p{
  display: inline-block;width: 100px;height: 30px;
  color: white;text-align: center;
  line-height: 30px;
  font-size: 15px;
  text-decoration: none;
  background: #ff7d6e;
  border-radius: 3px;
  margin-right: 50px;
  float: right;
}
#test-advertisement-a:hover #test-advertisement-p{
  position:relative;
  width: 110px;
  height: 40px;
  line-height: 40px;
  font-size: 20px;
  left: 5px;
  top: 5px;
}
#test-advertisement-p2{
  position:relative;
  display: inline-block;
  width: 150px;
  height: 34px;
  color: #304265;
  text-align: center;
  font-size: 26px;
  line-height: 34px;
  border-radius: 3px;
}
.brand a{
  line-height: 30px;
  width: 30px;
  text-decoration: none;
  color:#333;
}
.brand a:hover{
  color: #f29600;
}
.brand p{
  padding: 0;margin: 0;font-weight: bold;font-size: 20px
}
.second_main_p1{
  text-decoration: none;
  color:#413b5b;
  font-weight: bold;
  font-size: 25px;
  margin: 10px auto;
}
.second_main_p2{
  text-decoration: none;
  color:#413b5b;
  margin: 0;
}
.second_main:hover .second_main_p1{
  color:#f29600;
}
.three_a{
  position:relative;display: inline-block;left: 380px;top: 25px;
  text-decoration: none;
  font-weight: bold;
  width: 825px;
}
.three-p{
  float: right;font-size: 30px;margin: 0;font-weight:normal;
  text-decoration: none;color: #999;
}
.three_a:hover .three-p{
  color:#f29600;
}
.fourcar{
  transition-duration:1s;
}
.fourcar:hover{
  transform:scale(1.1) ;
}
.four-button{
  display: inline-block;width: 100px;height: 30px;
  color: white;text-align: center;
  line-height: 30px;
  font-size: 15px;
  text-decoration: none;
  background: #caa38c;
  border-radius: 3px;
  margin-right: 150px;
  margin-top: 20px;
  float: right;
}
.seven-card{

}
.seven-card:hover{
  position:relative;
  top: -5px;
}
#nine{
  border: 1px solid #e8e8e8;
}





.c1{
  height: 85px/*;border: 2px solid #0aa1ed*/;border-radius: 5px;

}
.header-set{
  width: 1200px;height: 85px;margin: 0 auto;padding: 0;
}
.brand a{
  line-height: 30px;
  width: 30px;
  text-decoration: none;
  color:#333;
}
.brand a:hover{
  color: #f29600;
}
.brand p{
  padding: 0;margin: 0;font-weight: bold;font-size: 20px
}
.second_main:hover .second_main_p1{
  color:#f29600;
}
.three_a:hover .three-p{
  color:#f29600;
}
.el-tabs__item.is-active {
  color: #f29600;
}
.el-tabs__active-bar{
  background-color: #f29600;
}
.el-tabs__item:hover {
  color: #f29600;
  cursor: pointer;
}
.el-tabs__item.is-active {
  color: #f29600;
}
.header-set .el-input__inner{
  border: 1px solid #f29600;
  border-radius: 0;
}
.el-input.is-active .el-input__inner, .el-input__inner:focus {
  border:2px solid #f29600;
  outline: 0;
}
.el-menu--horizontal>.el-submenu.is-active .el-submenu__title {
  border-bottom: 2px solid #f29600;
  color: #303133;
}

.el-submenu.is-active .el-submenu__title {
  border-bottom-color: #f29600;
}
.el-input-group__append, .el-input-group__prepend{
  color: #f29600;
  border: 2px solid #f29600;
  border-radius: 0;
}

.el-menu--horizontal>.el-submenu.is-active .el-submenu__title {
  border-bottom: 2px solid #f29600;
  color: #303133;
}
.el-menu--horizontal>.el-submenu.is-active .el-submenu__title {
  border-bottom: 2px solid #f29600;
  color: #f29600;
}

.el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: #f29600;
  border-color: #f29600;
}
.el-checkbox__input.is-checked+.el-checkbox__label {
  font-weight: bolder;
  color: #303133;
}
.el-checkbox__inner:hover {
  border-color: #f29600;
}

.el-submenu.is-active .el-submenu__title {
  border-bottom-color: #f29600;
}


</style>


